<template>
  <div>
    <el-form :model="skuForm" ref="ruleForm" label-width="100px">
      <el-form-item label="SPU名称"> {{ spuForm.spuName }} </el-form-item>
      <el-form-item label="SKU名称" prop="skuName">
        <el-input
          v-model="skuForm.skuName"
          placeholder="请输入SKU名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" prop="price">
        <el-input
          v-model="skuForm.price"
          type="number"
          placeholder="请输入价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU重量" prop="weight">
        <el-input
          v-model="skuForm.weight"
          type="number"
          placeholder="请输入价格"
        ></el-input>
      </el-form-item>
      <el-form-item label="SKU描述" prop="skuDesc">
        <el-input type="textarea" v-model="skuForm.skuDesc"></el-input>
      </el-form-item>
      <!-- SPU品牌 -->
      <el-form-item label="SPU品牌" prop="tmId">
        <el-select v-model="skuForm.tmId" placeholder="请输入SPU品牌">
          <el-option
            v-for="trademark in trademarkList"
            :key="trademark.id"
            :label="trademark.tmName"
            :value="trademark.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 平台属性 -->
      <el-form-item label="平台属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item
            :label="attr.attrName"
            v-for="attr in AttrList"
            :key="attr.id"
          >
            <el-select placeholder="请选择" v-model="attr.attrIdValueId">
              <el-option
                :label="attrVale.valueName"
                v-for="attrVale in attr.attrValueList"
                :key="attrVale.id"
                :value="`${attr.id}:${attrVale.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 销售属性 -->
      <el-form-item label="销售属性">
        <el-form label-width="100px" :inline="true">
          <el-form-item
            :label="spu.saleAttrName"
            v-for="spu in spuSaleAttrList"
            :key="spu.baseSaleAttrId"
          >
            <el-select placeholder="请选择" v-model="spu.attrIdValueId">
              <el-option
                :label="spuVale.saleAttrValueName"
                v-for="spuVale in spu.spuSaleAttrValueList"
                :key="spuVale.id"
                :value="`${spu.baseSaleAttrId}:${spuVale.id}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- 图片 -->
      <el-form-item>
        <el-table
          ref="multipleTable"
          :data="spuImgList"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="图片" width="300">
            <template slot-scope="{ row }">
              <img
                :src="row.imgUrl"
                :alt="row.imgName"
                style="width: 200px; height: 200xp"
              />
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="200">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                @click="changeDefault(row)"
                v-if="row.isDefault === '0'"
              >
                设置默认图片
              </el-button>
              <el-tag :disable-transitions="true" type="success" v-else
                >默认</el-tag
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="min" style="margin-top: 20px" @click="save">
      确认
    </el-button>
    <el-button size="min" style="margin-top: 20px" @click="cancel">
      取消
    </el-button>
  </div>
</template>

<script>
import { getAttrListApi } from "@/api/product/attr/attr";
import {
  spuSaleAttrListApi,
  spuImgListApi,
  getSpuTrademarkListApi,
  saveSkuInfoApi,
} from "@/api/product/spu/spu";
export default {
  name: "SaveSku",
  props: {
    category1Id: Number,
    category2Id: Number,
    category3Id: Number,
    setSpuList: Object,
  },
  data() {
    return {
      skuForm: {
        //父组件传递
        tmId: "",
        spuId: "",
        category3Id: "",
        //v-model自动获取
        skuName: "",
        price: "",
        weight: "",
        skuDesc: "",
        //手动收集
        skuAttrValueList: [],
        skuDefaultImg: "",
        skuImageList: [],
        skuSaleAttrValueList: [],
      },
      spuForm: {},
      AttrList: [],
      spuSaleAttrList: [],
      spuImgList: [],
      trademarkList: [],
      selectSpuImgList: [],
      rules: {
        skuName: [
          { required: true, message: "请输入SKU名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "change",
          },
        ],
        price: [{ required: true, message: "请输入价格" }],
        weight: [{ required: true, message: "请输入重量" }],
        skuDesc: [
          { required: true, message: "请填写SKU描述", trigger: "blur" },
        ],
        skuAttrValueList: [
          {
            required: true,
            message: "至少添加一个平台属性",
            trigger: "change",
          },
        ],
        skuSaleAttrValueList: [
          {
            required: true,
            message: "至少添加一个销售属性",
            trigger: "change",
          },
        ],
      },
      /* {
        skuAttrValueList: [
          {
            attrId: 0,
            valueId: 0,
          },
        ],
        skuDefaultImg: "string",
        skuDesc: "string",
        skuImageList: [
          {
            id: 0,
            imgName: "string",
            imgUrl: "string",
            isDefault: "string",
            spuImgId: 0,
          },
        ],
        skuName: "string",
        skuSaleAttrValueList: [
          {
            saleAttrId: 0,
            saleAttrValueId: 0,
          },
        ],
        spuId: 0,
        tmId: 0,
        weight: "string",
      }, */
    };
  },
  async mounted() {
    const { category1Id, category2Id, category3Id, setSpuList } = this;
    const promise1 = getAttrListApi(category1Id, category2Id, category3Id);
    const promise2 = spuSaleAttrListApi(setSpuList.id);
    const promise3 = await spuImgListApi(setSpuList.id);
    const promise4 = await getSpuTrademarkListApi();
    const res = await Promise.all([promise1, promise2, promise3, promise4]);
    this.spuForm = setSpuList;
    this.AttrList = res[0].data;
    this.spuSaleAttrList = res[1].data;
    let imgList = res[2].data;
    imgList.forEach((item) => {
      item.isDefault = "0";
    });
    this.spuImgList = imgList;
    this.trademarkList = res[3].data;
  },
  methods: {
    //跳转页面
    cancel() {
      this.$emit("showPage", 1);
    },
    //图片数据收集
    handleSelectionChange(value) {
      this.selectSpuImgList = value;
    },
    //点击默认
    changeDefault(row) {
      this.spuImgList.forEach((item) => {
        item.isDefault = "0";
      });
      row.isDefault = "1";
      console.log(row.imgUrl);
      this.skuForm.skuDefaultImg = row.imgUrl;
    },
    //添加Sku
    async save() {
      const {
        skuForm,
        spuForm,
        AttrList,
        setSpuList,
        spuSaleAttrList,
        selectSpuImgList,
      } = this;
      skuForm.category3Id = spuForm.category3Id;
      skuForm.tmId = setSpuList.tmId;
      skuForm.spuId = setSpuList.id;
      //处理平台属性
      /* skuAttrValueList: [
          {
            attrId: 0,
            valueId: 0,
          },
        ], */
      skuForm.skuAttrValueList = AttrList.reduce((prv, attr) => {
        const id = attr.attrIdValueId;
        if (id) {
          const [attrId, valueId] = id.split(":");
          const obj = {
            attrId,
            valueId,
          };
          prv.push(obj);
        }
        return prv;
      }, []);
      //处理销售属性
      /* skuSaleAttrValueList: [
          {
            saleAttrId: 0,
            saleAttrValueId: 0,
          },
        ], */
      skuForm.skuSaleAttrValueList = spuSaleAttrList.reduce((prv, attr) => {
        const id = attr.attrIdValueId;
        if (id) {
          const [saleAttrId, saleAttrValueId] = id.split(":");
          const obj = {
            saleAttrId,
            saleAttrValueId,
          };
          prv.push(obj);
        }
        return prv;
      }, []);
      // 处理图片列表
      /* 
      skuImageList: [
          {
            id: 0,
            imgName: "string",
            imgUrl: "string",
            isDefault: "string",
            spuImgId: 0,
          },
        ],
      */
      skuForm.skuImageList = selectSpuImgList.map((item) => {
        const { id, imgName, imgUrl, isDefault } = item;
        return {
          imgName,
          imgUrl,
          isDefault,
          spuImgId: id,
        };
      });
      this.$refs.ruleForm.validate( async(valid) => {
        if (valid) {
          try {
            await saveSkuInfoApi(skuForm);
            this.$message.info("添加Sku成功");
            this.cancel();
            //清空数据
            this.resetData();
          } catch (err) {
            this.$message.info("添加Sku失败"+err);
          }
        } else {
          this.$message.info("添加Sku失败");
          return false;
        }
      });
    },
    resetData() {
      Object.assign(this.$data,this.$options.data());
    },
  },
};
</script>

<style></style>
